<script>
    import { onMount } from 'svelte';
    import { createEventDispatcher } from 'svelte';
    import { GEOJSON_EMPTY, getPointJson } from '../../assets/mapdata'

    export let center = [109.326244, 33.504622]
    export let zoom = 3

    const dispatch = createEventDispatcher();

    let map = null
    onMount(() => {
        console.time('map')
        map = new SFMap.Map({
            container: 'map',
            center: center,
            zoom: zoom
        });
        map.on('load', () => {
            console.timeEnd('map')
            map.dragRotate.disable();
            map.touchPitch.disable();
            map.touchZoomRotate.disableRotation();
            // 定位图层
            map.addSource('map-location-source', {
                type: 'geojson',
                data: GEOJSON_EMPTY,
            });
            map.addLayer({
                id: 'map-location-layer',
                source: 'map-location-source',
                type: 'circle',
                paint: {
                    'circle-radius': 8,
                    'circle-color': '#00f',
                    'circle-stroke-color': '#ffffff',
                    'circle-stroke-opacity': 0.6,
                    'circle-stroke-width': 2,
                },
            });
            dispatch('mapLoaded', map)
        })
    })

    const mapTools = [
        {code: 'zoomin', title: '放大', icon: 'zoomin'},
        {code: 'zoomout', title: '缩小', icon: 'zoomout'},
        {code: 'location', title: '定位', icon: 'location'}
    ]

    function toolClickFunction(code) {
        const duration = 500;
        switch (code) {
            case 'zoomin': {
                map.zoomIn({ duration: duration });
                break;
            }
            case 'zoomout': {
                map.zoomOut({ duration: duration });
                break;
            }
            default: {
                try {
                    navigator.geolocation.getCurrentPosition((position) => {
                        const center = [position.coords.longitude, position.coords.latitude];
                        map.getSource('map-location-source').setData(getPointJson(center));
                        const zoom = map.getZoom();
                        map.flyTo({ center, zoom: zoom > 15 ? zoom : 15 });
                    });
                } catch (e) {
                    mui.toast('位置权限获取失败!',{ duration:'long', type:'div' })
                }
            }
        }
    }
</script>

<div class="map" id="map">
    <div class="map-buttons">
        {#each mapTools as tool}
            <div
                class="tool"
                on:click={ () => { toolClickFunction(tool.code) } }>
                <img src="{`./imgs/${tool.icon}.png`}">
            </div>
        {/each}
    </div>
</div>

<style lang="scss">
  $icon-size: 2rem;

  .map {
    width: var(--percent100);
    height: var(--percent100);
  }
  .map-buttons {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 99;

    .tool {
      width: $icon-size;
      height: $icon-size;
      background-color: rgba(255,255,255,0.90);
      position: relative;
      padding: 0.4rem;
      border: 0.5px solid rgba(238,238,238,1);
      box-shadow: 0 0.5px 6px 0 rgba(238,238,238,1);
      border-radius: 4px;
      margin-bottom: 0.4rem;
      box-sizing: content-box;
      img {
        width: 100%;
      }
      &:last-child {
        margin-bottom: 0;
      }
      &:active {
        background-color: #efefef;
      }
    }
  }
</style>